<template>
  <div class="login-content">
    <header>
      <div class="logo-box1">
        <a>
          <img src="../../assets/loginLogo.png" alt="首页" />
        </a>
        <div class="tel-box1">
          <!-- <router-link to="/Login" class="tel">会员登录</router-link> -->
          <div class="tel-img">
            <img src="../../assets/code.png" />
          </div>
        </div>
      </div>
      <nav>
        <ul>
          <li>
            <router-link to="/" class="tel" title="首页"
              ><span>首页</span></router-link
            >
          </li>
          <li
            class="hosub-box hosub-box1"
            @mouseenter="mouseenter"
            @mouseleave="mouseleave"
          >
            <router-link to="#" class="tel" title="关于协会"
              ><span>关于协会</span></router-link
            >

            <div class="sub-box sub-box1" v-show="hover1">
              <div style="position: relative">
                <img
                  style="position: absolute; top: -12px"
                  src="../../assets/upimg.png"
                  alt=""
                />
                <div class="tab-cont">
                  <router-link to="#">协会简介</router-link>
                  <router-link to="#">协会章程</router-link>
                </div>
              </div>
            </div>
          </li>
          <li
            class="hosub-box hosub-box2"
            @mouseenter="mouseenter1"
            @mouseleave="mouseleave1"
          >
            <router-link to="#" class="tel" title="资讯中心"
              ><span>资讯中心</span></router-link
            >

            <div class="sub-box sub-box2" v-show="hover2">
              <div style="position: relative">
                <img
                  style="position: absolute; top: -12px"
                  src="../../assets/upimg.png"
                  alt=""
                />

                <div class="tab-cont">
                  <router-link to="#">行业动态</router-link>
                  <router-link to="#">协会动态</router-link>
                  <router-link to="#">会员动态</router-link>
                </div>
              </div>
            </div>
          </li>
          <li>
            <router-link to="#" class="tel" title="会员名录"
              ><span>会员名录</span></router-link
            >
          </li>
          <li
            class="hosub-box hosub-box3"
            @mouseenter="mouseenter2"
            @mouseleave="mouseleave2"
          >
            <router-link to="#" class="tel" title="会员服务"
              ><span>会员服务</span></router-link
            >

            <div class="sub-box sub-box3" v-show="hover3">
              <div style="position: relative">
                <img
                  style="position: absolute; top: -12px"
                  src="../../assets/upimg.png"
                  alt=""
                />

                <div class="tab-cont">
                  <router-link to="#">会员申请</router-link>
                  <router-link to="#">资料下载</router-link>
                  <router-link to="#">培训服务</router-link>
                </div>
              </div>
            </div>
          </li>
          <li>
            <router-link to="#" class="tel" title="协会公告"
              ><span>协会公告</span></router-link
            >
          </li>
          <li>
            <router-link to="#" class="tel" title="党建园地"
              ><span>党建园地</span></router-link
            >
          </li>
        </ul>
      </nav>
    </header>
    <div class="login-box">
      <div class="login-form">
        <div class="login-title">会员登录</div>
        <div class="login-input">
          <div class="input-item">
            <img src="../../assets/user.png" alt="" />
            <input type="text" placeholder="请输入登录账号" />
          </div>
          <div class="input-item">
            <img src="../../assets/lock.png" alt="" />
            <input type="text" placeholder="请输入密码" />
          </div>
          <button @click="login">立即登录</button>
        </div>
        <div class="icp-code">Copyright © 2023    贵州省担保业协会   版权所有       备案号：黔ICP备20003593号-1</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      hover1: false,
      hover2: false,
      hover3: false,
    };
  },
  mounted() {},
  methods: {
    mouseenter() {
      console.log("鼠标悬停了");
      this.hover1 = true;
    },
    mouseleave() {
      this.hover1 = false;
    },
    mouseenter1() {
      console.log("鼠标悬停了");
      this.hover2 = true;
    },
    mouseleave1() {
      this.hover2 = false;
    },
    mouseenter2() {
      console.log("鼠标悬停了");
      this.hover3 = true;
    },
    mouseleave2() {
      this.hover3 = false;
    },
    login(){
        this.$router.push('/')
    }
  },
};
</script>

<style scoped>
.login-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 216px);
}

.login-form {
  width: 23%;
  height: 48.7%;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 2.5% 3.5% 3.5% 3.5%;
}
.login-content {
  background-image: url("../../assets/loginBg.png");
  background-size: 100% 100%;
  height: 100vh;
}

.login-title {
  color: #0063ba;
  font-size: 2.8vh;
  text-align: center;
  font-weight: bold;
}

.login-input input {
  border: none;
  background-color: transparent;
  color: #999999;
  font-weight: 400;
  font-size: 1.6vh;
  width: 100%;
  height: 100%;
  outline:none;
  margin-left: 5px;
}
.login-input button{
    margin-top: 6vh;
    background-color: #0063BA;
    border-radius: 6px;
    font-size: 1.8vh;
    color: #fff;
    padding: 2%;
    width: 100%;
}

.input-item{
    width: 100%;
    height: 5vh;
    display: flex;
    align-items: center;
    padding: 5px;
    background-color: #ffffff;
    margin-top: 5.5vh;
    border-radius: 6px;
}

.icp-code{
    position: fixed;
    bottom: 1vh;
    left: 0%;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 1.4vh;
}

header {
  width: 100%;
  max-width: 100vw;
  height: 216px;
  /* display: flex; */
  justify-content: space-between;
  /* border-bottom: 1px dashed #d5d5d5; */
  position: relative;
  z-index: 9999;
  /* min-width: 1280px; */
  background: transparent;
  margin: 0px auto;
}

header .logo-box1 {
  max-width: 100vw;
  /* background-color: #FFFFFF;
	background-image: url('../headerbj.png'); */

  /* background-size: 100% 100%; */
  background-color: rgba(0, 0, 0, 0);

  /* width: 70%; */
  padding: 0 15% 0 15%;
  height: 156px;
  display: flex;
  /* flex-direction: column; */
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
}

header .tel-box1 {
  /* width: 300px; */
  height: 100%;
  font-size: 13px;
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  align-items: center;
}

header .tel-box1 .tel-img {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px;
  border: 1px solid #0056a2;
}

header .tel-box1 .tel-img img {
  display: block;
  width: 100px;
  height: 100px;
}

header .tel-box1 .tel {
  text-decoration: none;
  color: #ffffff;
  font-size: 18px;
  background-color: #0056a2;
  border-radius: 18px;
  padding: 5px 15px;
  margin-right: 52px;
  /* font-weight: bold; */
}
/* 导航 */
header nav {
  max-width: 100vw;
  width: 100%;
  height: 60px;
  /* max-width: 100vw; */
  /* margin: 0px auto; */
  background-color: #0056a9;
}

header nav ul {
  width: 70%;
  justify-content: space-between;
  margin: 0px auto;
  font-size: 0px;
  position: relative;
  /* padding: 0px 10%; */
}

header nav ul li {
  width: 14.2%;
  display: inline-block;
  text-align: center;
  line-height: 60px;
}

header nav ul li a {
  display: block;
  font-size: 18px;
  color: #ffffff;
  text-decoration: none;
}

header nav ul li:hover a {
  /* padding-bottom: 3px; */
}

/* 
header nav ul li:hover span,
header nav ul li.hover a span {
	background-color: #53B448;
	padding: 21px 35px;
	font-weight: bold;
	color: #FFFFFF;
} */

header nav ul li:hover {
  background-color: #003f85;
  /* padding: 21px 35px; */
  /* font-weight: bold; */
  color: #ffffff;
}

header nav ul li a i.fa {
  margin-left: 6px;
}

/* 副栏目 */
header nav ul li {
  position: relative;
  cursor: pointer;
}

header nav ul li .sub-box {
  opacity: 1;
  position: absolute;
  left: 0px;
  top: 70px;
  width: 100%;
  border-radius: 5px;
  /* overflow: hidden; */
  background: #ffffff;
  color: #0056a2;
  /* display: none; */
  flex-direction: column;
  transition: width 2s, height 4s;
}

.sub-box .top {
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: #53b448;
  transform: rotate(45deg);
  left: 38%;
  top: -10%;
}

/* header nav ul li:hover .sub-box {
	opacity: 1;
	display: flex;
} */

header nav ul li .sub-box a {
  /* color: #333; */
  color: #0056a2;
  line-height: 50px;
}

header nav ul li .sub-box a:hover {
  color: #ffffff;
  background-color: #0056a2;
  /* font-weight: bold; */
}
</style>